<template>
<view>
	<u-navbar :is-back="false" title="对账记录详情"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>

	
  <CommDetail :cid="cid" :info="info" :current="2">
    <view class="cons whiteBg">
     

			   
      <view class="topBox whiteBg">
        <view class="info  x-row">
          <view class="x-col">
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      对账类型：</view>
			    {{detail.fStatus}}
			  </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      对账状态：</view>
			    {{detail.fStatus}}
			  </view>
            <view class="itxt">
              <view class="s1 u-skeleton-fillet">
                对账金额：</view>
              {{detail.fMoney}}
            </view>
            <view class="itxt">
              <view class="s1 u-skeleton-fillet">
                对账时间：</view>
              {{detail.fSumDate}}
            </view>
            <block>
              <view class="itxt">
                <view class="s1 u-skeleton-fillet">
                  收款账户：</view>
                {{detail.fAccount}}
              </view>
              <view class="itxt">
                <view class="s1 u-skeleton-fillet">
                  开户行：</view>
                {{detail.fBank}}
              </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      联系人：</view>
			    {{detail.fContacts}}
			  </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      联系电话：</view>
			    {{detail.fTell }}
			  </view>
            </block>
            <block>
              <view class="itxt"  @click="imgshow">
                <view class="s1 u-skeleton-fillet">
                  相关图片：</view>
                <image :src="imgPic+detail.fPic" mode="" />
              </view>
              <view class="itxt">
                <view class="s1 u-skeleton-fillet">
                  对账说明：</view>
                {{detail.fInfo}}
              </view>
            </block>
          </view>
        </view>
 
      </view>

    </view>

  </CommDetail>
	
</view>	</template>

<script>
import CommDetail from './commdetail'
export default {
  components: { CommDetail },
  data() {
    return {
      cid: 0,
	   willid: 0,
      info: {},
      detail: {},
	   paylist: [],
      imgPic: this.urlimg,
      form: {
        totalNum: 0,
        total: 0,
        list: []
      },
	  payform: {
	    OrderId: 0,
	    MrkId: 0,
	    OrderOrWill: 2
	  }
    }
  },
  onLoad(e) {
    this.cid = Number(e.id)
	  this.willid = Number(e.willid)
    this.$axios('api/MrkBasic/GetDetail', 'post', {
      value: e.id
    }).then(res => {
      this.info = res.Value
      this.loading = false
      return res.Value
    })
	
    this.$axios('api/MrkSumMonth/GetDetail', 'post', { value: e.willid }).then(res => {
      this.detail = res.Value
    })
 
  }
  ,
  methods: {
    
    imgshow() {
      let arr = [this.urlimg + this.detail.fPic]
      uni.previewImage({
        urls: arr,
        current: arr[0]
      })
    }
 
	
  }
}
</script>

<style lang="scss" scoped>
page {
  padding: 0 20rpx;
}
.goodBox {
  padding-left: 24rpx;
  box-sizing: border-box;
  .gtit {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    padding: 18rpx 8rpx;
  }
  .glist {
    padding: 32rpx 32rpx 32rpx 0;
    box-sizing: border-box;
    .gimg {
      width: 144rpx;
      height: 144rpx;
      margin-right: 24rpx;
    }
    .gname {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      line-height: 30rpx;
      height: 80rpx;
    }
    .num {
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
      line-height: 24rpx;
    }
    .price {
      font-size: 32rpx;
      font-weight: bold;
      color: #000000;
      line-height: 40rpx;
      text {
        font-size: 24rpx;
      }
    }
  }
}
.totalrow {
  margin: 20rpx 0;
  padding: 40rpx 0;
  text-align: center;
  .tname {
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 44rpx;
  }
  .tnum {
    font-size: 48rpx;
    font-weight: 500;
    color: #111111;
    line-height: 64rpx;
  }
}
.topBox {
  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;

      .s1 {
        width: 160rpx;
        color: #979797;
        font-size: 32rpx;
        display: inline-block;
      }

      .yhj {
        width: 96rpx;
        height: 40rpx;
        text-align: center;
        border-radius: 20rpx;
        display: inline-block;
        line-height: 40rpx;
        border: 2rpx solid #2b88fe;
        font-size: 28rpx;
        color: #2b88fe;
        margin-left: 16rpx;
      }

      .mingxi {
        font-weight: 400;
        color: #2b88fe;
        line-height: 42rpx;

        .iconfont {
          font-size: 25rpx;
        }

        display: inline-block;
        margin-left: 16rpx;
      }
    }
  }
  image {
    width: 100rpx;
    height: 100rpx;
  }
  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 96rpx;
      height: 96rpx;
      margin-right: 16rpx;
      background-color: #f2f2f2;
    }

    .sname {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .khmc {
      padding-top: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }

    .iconyou {
      color: #999999;
    }
  }
}
</style>